<template>
  <div class="bill_detail">
    <header-go-back title="账单详情" @back="handleGoBack">
      <template v-slot:text>
        <van-popover v-model:show="moreVisible">
          <div class="more_sheet_text" @click="handleDeleteBill">删除</div>
          <template #reference>
            <div class="header_button">
              <i class="iconfont icon-gengduo"></i>
            </div>
          </template>
        </van-popover>
      </template>
    </header-go-back>
    <div class="detail_lists">
      <div class="detail_header">
        <div class="list_header_title">
          <i :class="['iconfont', data.icon]"></i>
          <span>{{ getTitle(false, data.titleId) }} {{ data.subTitleId ? '-' : '' }} {{ getTitle(true, data.subTitleId) }}</span>
        </div>
        <div class="list_header_text">{{ data.type === 'pay' ? '-' : '+' }}{{ data.money }}</div>
      </div>
      <div class="detil_list" @click="handleEditDate(data.date)">
        <div class="list_title">账单日期</div>
        <div class="list_text">{{ getFormatDate(data.date) }}</div>
      </div>
      <div class="detil_list">
        <div class="list_title">账本</div>
        <div class="list_text">{{ data.book?.name || '账本📒' }}</div>
      </div>
      <div class="detil_list" @click="handleEditDesc()">
        <div class="list_title">备注</div>
        <div class="list_text">{{ data.desc }}</div>
        <div class="add_desc" v-if="!data.desc">点击添加</div>
      </div>
      <div class="detil_list">
        <div class="list_title">记录时间</div>
        <div class="list_text">{{ getFormatDate(data.createTime) }}</div>
      </div>
    </div>
    <div class="detail_button">
      <div class="edit" @click="handleGoEdit">编辑</div>
    </div>
    <van-action-sheet v-model:show="editDescVisible">
      <div class="budget_input">
        <div class="input_header">
          <div class="header_title">编辑备注</div>
          <div class="header_save" @click="handleConfirm">√</div>
        </div>
        <div class="input">
          <input type="text" placeholder="请输入备注" v-model="editDesc">
          <i class="iconfont icon-shanchu delete" @click="editDesc = ''"></i>
        </div>
      </div>
    </van-action-sheet>
    <van-calendar
      color="#ff7c79" 
      position="right"
      :round="false"
      v-model:show="editDateVisible" 
      :min-date="showData.start"
      :max-date="showData.end"
      @confirm="onConfirm" 
      :default-date="defaultDate"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import { getClassTitle, setCalendarShowData } from '@/utils/helper'
import HeaderGoBack from '@/components/common/HeaderGoBack.vue'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { useStore } from 'vuex'
import { deleteBill, getBillDetail, updateBill } from '@/api/bill'
import { Toast } from 'vant'
export default defineComponent({
  components: {
    HeaderGoBack
  },
  setup() {
    const router = useRouter()
    const route  = useRoute()
    const store = useStore()
    const classList = computed(() => store.state.classList)
    const editDescVisible = ref(false)
    const editDateVisible = ref(false)
    const billId = ref(-1)
    const moreVisible = ref(false)
    const defaultDate = ref(new Date())
    const showData = reactive({
        start: new Date(),
        end: new Date()
      })
    const data = ref({
        createTime: '',
        desc: '',
        linked: '',
        subTitleId: 0,
        type: '',
        money: 0,
        icon: '',
        titleId: 0,
        date: '',
        id: null,
        book: {
          name: '',
          id: ''
        },
        user: {},
    })
    const editDesc = ref('')
    const editDate = ref('')
    // 返回首页
    const handleGoBack = () => {
      router.push('/')
    }
    // 格式化详情列表展示的时间格式
    const getFormatDate = (date: string) => {
      return dayjs(date).format('YYYY年MM月DD日 HH:mm')
    }
    // 跳转到编辑页面
    const handleGoEdit = () => {
      setTimeout(() => {
        router.push({
          path: '/bookkeeping',
          query: {
            type: 'edit',
            id: data.value.id
          }
        })
      },200)
    }
    // 通过类id获取类名
    const getTitle = (isSub: boolean, id: number) => {
      return getClassTitle(isSub, id, classList.value)
    }
    // 编辑备注
    const handleEditDesc = () => {
      editDescVisible.value = true
    }
    // 编辑账单日期
    const handleEditDate = (date: string) => {
      editDateVisible.value = true
      defaultDate.value = new Date(date)
      const { start, end } = setCalendarShowData(3)
      showData.start = start
      showData.end = end
    }
    // 编辑日期后确认
    const onConfirm = (value: string) => {
      editDate.value = dayjs(value).format('YYYY-MM-DD ')+dayjs().format('HH:mm:ss')
      editDateVisible.value = false
      saveConfirm()
    }
    // 编辑备注之后确认
    const handleConfirm = () => {
      editDescVisible.value = false
      saveConfirm()
    }
    const saveConfirm = () => {
      console.log(1);
      if(editDesc.value !== data.value.desc || editDate.value !== data.value.date) {
        data.value.desc = editDesc.value
        data.value.date = editDate.value
        const { desc, id, date } = data.value
        updateBill({
          desc,
          id,
          date
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        }).then((res:any) => {
          if(res.code === 100) {
            Toast({
              message: '修改成功',
              icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
            });
          }
        })
      }
    }
    // 通过账单id获取账单详情
    const getBillDetailById = () => {
      getBillDetail({id: billId.value}).then((res) => {
        if(typeof res.code === 'number' && res.code === 100) {
          data.value = res.data
          const { date, desc } = data.value
          editDate.value = date
          editDesc.value = desc
        }
      })
    }
    // 删除帐单
    const handleDeleteBill = () => {
      console.log('删除账单');
      deleteBill({id: billId.value}).then((res) => {
        if(typeof res.code === 'number' && res.code === 100) {
          alert('删除成功')
          handleGoBack()
        }
      })
    }
    onMounted(() => {
      if(route.query.id) {
        billId.value = Number(route.query.id)
        getBillDetailById()
      }
    })
    return {
      data,
      editDescVisible,
      editDesc,
      moreVisible,
      editDateVisible,
      defaultDate,
      showData,
      handleGoBack,
      getFormatDate,
      handleGoEdit,
      getTitle,
      handleEditDesc,
      handleConfirm,
      handleDeleteBill,
      handleEditDate,
      onConfirm
    }
  }
})
</script>

<style scoped>
  .detail_lists {
    margin: 0 20px;
    font-family: '庞门正道真贵楷体';
  }
  .detail_header {
    line-height: 80px;
    border-bottom: #F9C3C2 dashed 1px;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 600;
    color: #F9C3C2;
  }
  .detail_header span {
    padding-left: 10px;
  }
  .detil_list {
    line-height: 60px;
    border-bottom: #F9C3C2 dashed 1px;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
  }
  .add_desc {
    color: #F9C3C2;
    font-family: "小星星";
    font-size: 14px;
  }
  .detail_button {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  .edit {
    height: 60px;
    line-height: 60px;
    margin: 30px 60px;
    background-color: #F9C3C2;
    overflow: hidden;
    z-index: 1;
    position: relative;
    box-shadow: #ffd7d6 0px 0px 12px 3px;
    border-radius: 14px;
  }
  .edit::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    transform: translate3d(-50%,-50%,0) scale(0,0);
    border-radius: 50%;
    background-color: #ffd7d6;
    transform-origin: center;
    transition: ease-in-out 0.2s;
  }
  .detail_button .edit:active::before {
    transform: translate3d(-50%,-50%,0) scale(15,15);
  }
  .budget_input {
    margin: 20px;
  }
  .input_header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .budget_input .input {
    text-align: left;
    position: relative;
    height: 30px;
    line-height: 30px;
  }
  .budget_input .input input {
    border: none;
  }
  .budget_input .delete {
    position: absolute;
    right: 0;
    line-height: 30px;
    height: 30px;
  }
</style>